<!--公共头部-->
{template 'aitimt/common/header'}
	<style>
        * {touch-action: pan-y;}
        html,body{background: #fff}
        .mui-slider{z-index: 5;overflow: unset;}
        .head-banner .mui-slider-group .mui-slider-item img{width: 100%;max-height: 200px; min-height: 200px;}
        .mui-slider .mui-slider-group .mui-slider-item img{width: 100%;max-height: 200px;}
        .mui-content{background-color: #fff;}
        .mui-content-padded{float: left;width: 100%;margin: 2%;}
        .mui-content-padded p{margin: 2% 2% 0 2%;width: 44%;float: left;}
        .mui-slider-indicator.mui-segmented-control .mui-control-item {border-bottom: 1px solid rgba(0,0,0,0.05);line-height: 30px;padding: 1px;color: #585858;}
        .mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border: 0}
        .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #585858;}
        .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after{content: '';position: absolute;bottom: 0;height: 3px;width: 30%;display: -webkit-box;margin-left: 10%;background-color: #E94709;}
        .mui-content-padded img{height: 5rem;margin-bottom: 10px;}
        .mui-preview-image.mui-fullscreen {position: fixed;z-index: 20;background-color: #000;}
        .mui-preview-header, .mui-preview-footer {position: absolute;width: 100%;left: 0;z-index: 10;}
        .mui-preview-header {height: 44px;top: 0;}  .mui-preview-footer {height: 50px;bottom: 0px;}
        .mui-preview-header .mui-preview-indicator {display: block;line-height: 25px;color: #fff;text-align: center;margin: 15px auto 4px;width: 70px;background-color: rgba(0, 0, 0, 0.4);border-radius: 12px;font-size: 16px;}
        .mui-preview-image {display: none;-webkit-animation-duration: 0.5s;animation-duration: 0.5s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
        .mui-preview-image.mui-preview-in {-webkit-animation-name: fadeIn;animation-name: fadeIn;}
        .mui-preview-image.mui-preview-out {background: none;-webkit-animation-name: fadeOut;animation-name: fadeOut;}
        .mui-preview-image.mui-preview-out .mui-preview-header, .mui-preview-image.mui-preview-out .mui-preview-footer {display: none;}
        .mui-zoom-scroller {position: absolute;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;left: 0;right: 0;bottom: 0;top: 0;width: 100%;height: 100%;margin: 0;-webkit-backface-visibility: hidden;}
        .mui-zoom {-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}
        .mui-slider .mui-slider-group .mui-slider-item img {width: auto;height: auto;max-width: 100%;max-height: 20rem;}
        .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {width: 100%;}
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {display: inline-table;}
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {display: table-cell;vertical-align: middle;}
        .mui-preview-loading {position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: none;}
        .mui-preview-loading.mui-active {display: block;}
        .mui-preview-loading .mui-spinner-white {position: absolute;top: 50%;left: 50%;margin-left: -25px;margin-top: -25px;height: 50px;width: 50px;}
        .mui-preview-image img.mui-transitioning {-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;transition: transform 0.5s ease, opacity 0.5s ease;}
        @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
        @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
        @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} }
        @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} }
        .mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border: 0;}
         p img {max-width: 100%;height: auto;}
        .photo-do{position: fixed!important;width: 100%;bottom: 0}
        .photo-do .mui-tab-item{display: table-cell;overflow: hidden;width: 1%;height: 50px;text-align: center;vertical-align: middle;white-space: nowrap;text-overflow: ellipsis;color: white;}
        .photo-do .mui-tab-item .mui-icon {font-size: 24px;position: relative;z-index: 20;top: 3px;width: 24px;height: 24px;padding-top: 0;padding-bottom: 0;}
        .photo-do .mui-tab-item .mui-icon~.mui-tab-label {font-size: 11px;display: block;overflow: hidden;text-overflow: ellipsis;}
        .photo-do .mui-active{color: #E94709}
        .mui-search input[type=search] {background-color: #fff;width: 50%;border-radius: 3.125rem;border: 1px #eee solid;height: 2.5625rem;}
		.top-slider{margin-top:10% ;height: 150px; overflow: unset;}
		.top-slider .mui-slider-group .mui-slider-item img{width: 100%;min-height: 150px;max-height: 150px;}
		.mui-indicator .mui-active{background-color:#000000;}
		.mui-search .mui-placeholder{color: #595757;line-height: 45px;font-size: 11px;width: 40%;}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #585858;border-bottom: 0;}
		.mui-bar-tab .mui-tab-item.mui-active{color: #ea4609;}
		.mui-bar-nav~.mui-content{margin-bottom: 10%;margin-top: 5%;}
		.mui-table-view .mui-media-object{max-width: 40%;}
		.mui-content{background-color: #FFFFFF;}
		.addtime{padding-top: 0.625rem;font-size: 0.625rem;}
		.now-more{color: #8f8f94;}
		.now-list{width: 95%;margin-left: 5%;}
		.now-item {width: 100%;margin-right: 5%;}
		.now-item img{width: 95%;height: 8rem;}
		.mui-input-row .mui-btn{background-color: #e94709;float: none;border-radius: 1.125rem;color: #fff;padding: 0;height: 2.5rem;}
		.mui-slider-indicator.mui-segmented-control .mui-control-item {padding: 1px;color: #585858;}
        .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #585858;}
        .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after{content: '';position: absolute;bottom: 0;height: 3px;width: 30%;display: -webkit-box;margin-left: 10%;background-color: #E94709;}
        .mui-input-row .mui-input-clear~.mui-icon-clear{display: none;}
        .photo-item{float: left;width: 45%;margin:2%;padding: 0;}
		.photo-item:after, .mui-table-view:before, .mui-table-view::after{height: 0;}
		.photo-item img{max-width: 100%;width: 50%;}
		.photo-item a{padding: 0;margin: 0;}
		.bottom-remind{width: 100%;text-align: center;padding-bottom: 20%;display: inline-block;font-size: 15px;color: #969696;}
        .event-message{padding-top:1% ;padding-left: 5%;}
        .event-message p{color: #595757;font-weight: 600;margin: 0}
    </style>
<!-- 公共头部start -->
<header class="mui-bar mui-bar-nav">
	<a class="top-return mui-action-back"><img src="{$aideUrl}app/resource/aitimt/images/return.png" ></a>
	<a class="top-logo"><img src="{$aideUrl}app/resource/aitimt/images/logo.png" ></a>
	<!--公共菜单start -->
	{template 'aitimt/common/menu'}
	<!-- 公共菜单end-->
</header>
<!-- 公共头部end -->
<div class="mui-slider top-slider">
    <div class="mui-slider-group mui-slider-loop">
        {loop array_reverse(unserialize($photo['atlas'])) $adv}
        <div class="slider-item mui-slider-item mui-slider-item-duplicate"><a href="{$photo['link']}"><img src="{php echo tomedia($adv)}" /></a></div>
        {php break;}
        {/loop}
        {loop unserialize($photo['atlas']) $adv}
        <div class="slider-item mui-slider-item"><a href="{$photo['link']}"><img src="{php echo tomedia($adv)}" /></a></div>
        {/loop}
        <!--支持循环，需要重复图片节点-->
        {loop unserialize($photo['atlas']) $adv}
        <div class="slider-item mui-slider-item mui-slider-item-duplicate"><a href="{$photo['link']}"><img src="{php echo tomedia($adv)}" /></a></div>
        {php break;}
        {/loop}
    </div>
</div>
<div class="event-message">
    <div class="mui-input-row" style="display: block;font-size: 15px;color: #595757;">
       赛事:<select id="race" name="race" style="margin: 0;font-size: 15px;color: #595757;width: 80%">
            {loop $activityList $activity}
            <option value="{$activity['raceid']}" {if $raceid==$activity['raceid']}selected="selected"{/if}>{$activity['name']}</option>
            {/loop}
        </select>
    </div>
</div>
<div class="now-recom">
    <div style="margin:0 5%;height: 3rem;">
        <div class="mui-input-row mui-search">
            <input type="search"  name="raceNum" class="mui-input-clear" value="{if $racNum!=null}{$racNum}{/if}" placeholder="请输入参赛号码">
            <button type="button" class="mui-btn" onclick="sendNum()" style="width: 15%;">搜索</button>
            <button type="button" class="mui-btn" style="width:30%;"><span class="mui-icon mui-icon-camera" style="font-size: 22px;"></span>人脸识别</button>
        </div>
    </div>
    <div class="mui-content" style="padding-top: 0;">
        <div id="slider" class="mui-slider" style="margin: 0;">
            <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <a class="mui-control-item mui-active" href="#item1mobile">高清图片</a>
                <a class="mui-control-item" href="#item2mobile">精彩瞬间</a>
            </div>
            <div class="mui-slider-group">
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                    <div class="mui-scroll">
                        <div class="mui-content-padded" id="jpgList">
                            <div class="bottom-remind">暂无搜索内容</div>
                        </div>
                    </div>
                </div>
                <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <div class="mui-scroll">
                        <div class="mui-content-padded"  id="gifList">
                            <div class="bottom-remind">暂无搜索内容</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="photo-do" id="photo-do" style="display: none">
    <a class="mui-tab-item" id="good" onclick="collect('good',this)">
        <span class="mui-icon iconfont icon-zan"></span>
        <span class="mui-tab-label">点赞</span>
    </a>
    <a class="mui-tab-item" id="collect" onclick="collect('collect',this)">
        <span class="mui-icon iconfont icon-shoucang"></span>
        <span class="mui-tab-label">收藏</span>
    </a>
    <a class="mui-tab-item" onclick="share(this)">
        <span class="mui-icon iconfont icon-fenxiang"></span>
        <span class="mui-tab-label">分享</span>
    </a>
    <a class="mui-tab-item" onclick="save(this)">
        <span class="mui-icon iconfont icon-xiazai"></span>
        <span class="mui-tab-label">下载</span>
    </a>
</div>
<script type="text/javascript" src="{$aideUrl}app/resource/aitimt/js/mui.zoom.js?v=20170912"></script>
<script type="text/javascript" src="{$aideUrl}app/resource/aitimt/js/mui.previewimage.js?v=20170912"></script>
<script type="text/javascript">
    mui.previewImage({zoom: false});
    $(document).ready(function(){
    });
    localStorage.removeItem('racNum');
    //初始化点赞，收藏状态
    function initStatus(imgSrc) {
        var collect=document.getElementById('collect');
        var good=document.getElementById('good');
        $.ajax({
            type: 'post',
            url: "{php echo app_url('home/index/photostatus')}",
            data: {img_src:imgSrc},
            dataType: 'json',
            success: function(data){
                if (data.collect==1){
                    collect.classList.add('mui-active');
                }else {
                    collect.classList.remove('mui-active');
                }
                if(data.good==1){
                    good.classList.add('mui-active');
                }else {
                    good.classList.remove('mui-active');
                }
            },
            error: function(xhr, type){
            }
        });
    }
    function photoClose() {
        document.getElementById('photo-do').style='display:none';
    }
    function imgSrc(){
        var src='';
        mui(".mui-preview-image .mui-slider-group .mui-slider-item").each(function (i,val) {
            var name=this.className;
            if(name.indexOf('mui-active')!=-1){
                src= this.getElementsByTagName("img")[0].src;
                return false;
            }
        });
        return src;
    }
    function share(cc){
        cc.classList.remove('mui-active');
        mui.toast('点击右上角进行分享');
    }
    function save(cc) {
        cc.classList.remove('mui-active');
        mui.toast('长按保存图片');
    }
    function collect(type,cc){
        var src=imgSrc();
        var arr ={img_src:src,type:type};
        $.post("{php echo app_url('home/index/photoshow')}", arr, function(data){
            console.log(data);
            if(data.errno == 0){
                mui.toast(data.msg);
                cc.classList.remove('mui-active');
            }else{
                mui.toast(data.msg);
            }
        },"json");
    }
    mui('.mui-content-padded').on('tap','p',function(){
        mui.previewImage().close();
        if(document.getElementById('__MUI_PREVIEWIMAGE').style.display!='block'){
            document.getElementById('photo-do').style='display:block;z-index: 100';
        }
    });
    var slider = mui(".top-slider");
    slider.slider({
        interval: 4000
    });
    wxReady();
    function wxReady(){
        wx.ready(function() {
            // 分享朋友圈
            var link=window.location.href;
            if(localStorage.getItem('racNum')!=null){
                link+='&racNum='+localStorage.getItem('racNum');
            }
            console.log(link);
            wx.onMenuShareTimeline({
                title: '{$photo["share_title"]}',
                link: '{$photo["share_link"]}' ? '{$photo["share_link"]}' : link,
                imgUrl: '{$photo["share_img"]}' ? '{php echo tomedia($photo["share_img"]);}' : '',
                success: function () {
                    //发送成功的方法
                    mui.toast('已分享');
                },
                cancel: function () {
                    //发送取消的方法
                    mui.toast('已取消');
                }
            });

// 分享给朋友
            wx.onMenuShareAppMessage({
                title: '{$photo["share_title"]}',
                desc: '{$photo["share_desc"]}',
                link: '{$photo["share_link"]}' ? '{$photo["share_link"]}' : link,
                imgUrl: '{$photo["share_img"]}' ? '{php echo tomedia($photo["share_img"]);}' : '',
                success: function () {
                    //发送成功的方法
                    mui.toast('已分享');
                },
                cancel: function () {
                    //发送取消的方法
                    mui.toast('已取消');
                }
            });
        });
    }

        function sendNum() {
            var raceNum = $("input[name='raceNum']").val();
            var raceid =  $("#race option:selected").val();
            if($.isEmptyObject(raceid) == true){
                mui.toast("请选择比赛赛事!");
                return false;
            }
            if($.isEmptyObject(raceNum) == true){
                mui.toast("请输入参赛号码!");
                return false;
            }
            var jpg='';
            var gif='';
            $.post("{php echo app_url('home/index/photosearch')}", {raceid:raceid,number:raceNum}, function(data){
                if (data.gif.length != 0 || data.jpg.length !=0){
                    mui.toast('查询成功,正在为您刷新');
                    for (var i=0;i<data.jpg.length;i++){
                        jpg+='<p><img src="'+data.jpg[i]+'" data-preview-src="" data-preview-group="1" /></p>'
                    }
                    for (var i=0;i<data.gif.length;i++){
                        gif+='<p><img src="'+data.gif[i]+'" data-preview-src="" data-preview-group="2" /></p>'
                    }
                    localStorage.setItem('racNum',raceNum);
                    wxReady();
                    setTimeout(function(){
                        document.getElementById('jpgList').innerHTML=jpg;
                        document.getElementById('gifList').innerHTML=gif;
                    },1000);
                } else {
                    mui.toast('当前活动未查询到此号码信息');
                }
            },"json");
        }
    {if $racNum!=null}
    var jpg='';
    var gif='';
    $.post("{php echo app_url('home/index/photosearch')}", {raceid:{$raceid},number:{$racNum}}, function(data){
        if (data.gif.length != 0 && data.jpg.length !=0){
            mui.toast('查询成功,正在为您刷新');
            for (var i=0;i<data.jpg.length;i++){
                jpg+='<p><img src="'+data.jpg[i]+'" data-preview-src="" data-preview-group="1" /></p>'
            }
            for (var i=0;i<data.gif.length;i++){
                gif+='<p><img src="'+data.gif[i]+'" data-preview-src="" data-preview-group="2" /></p>'
            }
            setTimeout(function(){
                document.getElementById('jpgList').innerHTML=jpg;
                document.getElementById('gifList').innerHTML=gif;
            },1000);
        } else {
            mui.toast('当前活动未查询到此号码信息');
        }
    },"json");
    {/if}
	</script>

	</body>

</html>
